<template>
	<div class="detail-comment">

		<comment-textarea
			:articleId="articleId"
			:parentId="null"
			@success="commentSuccess"
		></comment-textarea>

		<div class="comment-content-box">


			<div v-show="list.length == 0" class="no-data">
				<div class="no-data-wrap">
					<img :src="noComment">
					<p>暂无评论</p>
				</div>
			</div>

			<div v-show="list.length>0" class="c-item" v-for="(item,index) in list" :key="item.id">
				<!-- 头像 -->
				<a class="avatar-wrap">
					<img :src="imgPrefix+item.avatar">
				</a>

				<div class="c-content">
					<div class="c-user-info">
						<a class="c-user-name">{{ item.name }}</a>
						<span class="c-create-time">{{ convertTime(item.createTime) }}</span>
					</div>
					<p>{{ item.content }}</p>
					<div class="c-footer-action">
						<span class="c-reply" @click="replyComment(item,list)">回复</span>

						<span v-if="!isNull(item.children)" class="reply-count" @click="replyIsShow(item)">
							<a v-show="!item.replyVisible">{{ item.children.length }}条回复</a>
							<a v-show="item.replyVisible">收起回复</a>

							<i :class="{'el-icon-arrow-down':!item.replyVisible,'el-icon-arrow-up':item.replyVisible}"></i>
						</span>

						<el-tooltip class="bui-right c-report" effect="dark" content="举报" placement="bottom">
							<i class="icon iconfont ipc-report"></i>
						</el-tooltip>

						<el-tooltip class="bui-right c-digg" effect="dark" content="点赞" placement="bottom">
							<span>
								<i class="count" :class="{'thumb-active':item.thumbup}">{{ item.praiseCount }}</i>
								<i class="icon iconfont ipc-thumbsup" :class="{'thumb-active':item.thumbup}" @click="thumbup(item,1)"></i>
							</span>	
						</el-tooltip>
					</div>


					<comment-textarea
						v-show="item.isReply"
						:articleId="articleId"
						:parentId="item.id"
						@success="commentSuccess"
					></comment-textarea>

					<!-- 回复评论 -->
					<div v-show="!isNull(item.children) && item.replyVisible" class="c-reply-comment" v-for="subItem in item.children" :key="subItem.id">
						<a class="avatar-wrap">
							<img :src="imgPrefix+subItem.avatar">
						</a>

						<div class="c-content">
							<div class="c-user-info">
								<a class="c-user-name">{{ subItem.name }}</a>
								<span class="c-create-time">{{ convertTime(subItem.createTime) }}</span>
							</div>
							<p>{{ subItem.content }}</p>
							<div class="c-footer-action">
								
								<el-tooltip class="bui-right c-report" effect="dark" content="举报" placement="bottom">
      								<i class="icon iconfont ipc-report"></i>
    							</el-tooltip>

    							<el-tooltip class="bui-right c-digg" effect="dark" content="点赞" placement="bottom">
    								<span>

    									<i class="count" :class="{'thumb-active':subItem.thumbup}">{{ subItem.praiseCount }}</i>
      									<i class="icon iconfont ipc-thumbsup" :class="{'thumb-active':subItem.thumbup}" @click="thumbup(subItem,1)"></i>

      								</span>	
    							</el-tooltip>

							</div>


						</div>
					</div>
				</div>
			</div>
		</div>
	</div>	
</template>

<script>
import CommentTextarea from './commentTextarea'
import { commentList, praise } from "@/api/content/detail"
import { baseUrl } from '@/config/env';
import { validatenull } from "@/utils/validate"
//获取图片的url
const imgPrefix = baseUrl+'/rest/common/preview/';

export default{
	components:{
		CommentTextarea
	},
	props:{
		//文章id
		articleId:{
			type:[Number,String],
			default:''
		}
	},
	data(){
		return{
			list:[],
			imgPrefix:imgPrefix,
			noComment:require("@/assets/no-comment.png"),
			page:{
				currentPage:1,
				pageSize:10,
				total:0
			}
		}
	},
	mounted(){
		this.getCommentList(this.articleId);
	},
	
	methods:{
		//获取评论列表
		getCommentList(articleId){
			commentList(articleId,this.page.currentPage,this.page.pageSize).then((res)=>{
				console.log("------获取文章评论-------")
				console.log(res)
				var result = res.data.data;
				this.page.total = result.total;
				if(result.records.length > 0){
					this.list = this.convertList(result.records);
				}
				
			})
		},
		//转换处理评论列表
		convertList(data){
			for(var i=0;i<data.length;i++){
				data[i]["isReply"] = false;
				data[i]["replyVisible"] = false;
				data[i]["thumbup"] = 0;
				if (!validatenull(data[i].children)) {
					var cItem = data[i].children;
					for(var j=0;j<cItem.length;j++){
						cItem[j]["thumbup"] = 0;
					}
				}
			}
			return data;
		},
		//转换时间
		convertTime(time){
			var now = new Date().getTime();
			var createTime = new Date(time).getTime();

			var spacing1 = 5*60*1000;
			var spacing2 = 60*60*1000;
			var spacing3 = 24*60*60*1000;
			var spacing4 = 7*24*60*60*1000;

			var diff = now-createTime;
			if(diff <= spacing1){
				return '刚刚'
			}

			if(diff <= spacing2){
				return Math.floor(diff/(60*1000))+'分钟前'
			}

			if(diff <= spacing3){
				return Math.floor(diff/(60*60*1000))+'小时前'
			}

			if(diff <= spacing3){
				return Math.floor(diff/(24*60*60*1000))+'天前'
			}

			return time;
		},
		isNull(value){
			return validatenull(value)
		},
		//回复评论
		replyComment(item,list){
			for(var i=0;i<list.length;i++){
				list[i].isReply = false;
			}

			item.isReply = true;
			this.$forceUpdate();
			console.log(item)
		},
		//回复显示隐藏
		replyIsShow(item){
			item.replyVisible = !item.replyVisible;
			this.$forceUpdate();
		},
		//评论成功
		commentSuccess(){
			this.getCommentList(this.articleId);
		},
		//点赞
		thumbup(item,status){
			console.log("--点赞--")
			console.log(item)
			if(item.thumbup == 1) return;
			praise(item.id,status).then((res) => {
				console.log(res)
				if(res.data.code == 200){
					item.thumbup = 1;
					item.praiseCount ++;
				}
			})
			this.$forceUpdate();
		}
	}
}
</script>

<style lang="scss" scoped>

.thumb-active{
	color: #ed4040!important;
}

.bui-right {
    float: right;
}

.no-data{
	text-align: center;
	padding: 20px 0;
	.no-data-wrap{
		max-width: 440px;
		margin: auto;
		img{
			max-width: 200px;
			margin-left: 20px;
		}
		p{
			margin: 15px 0;
			font-size: 25px;
			font-weight: 700;
			color: #444;
		}
	}
}

.c-item{
	padding: 14px 0;
    border-top: 1px solid #f2f2f2;
    &:first-child{
    	margin-top: 22px;
    }
    .avatar-wrap{
    	float: left;
	    display: block;
	    width: 30px;
	    height: 30px;
	    border: 1px solid #e8e8e8;
	    border-radius: 50%;
	    overflow: hidden;
	    img{
	    	width: 100%;
    		height: 100%;
	    }
    }
    .c-content{
    	margin-left: 42px;
    	overflow: hidden;
    	.c-user-info{
    		margin-bottom: 4px;
    		.c-user-name{
    			color: #406599;
    			cursor: pointer;
    			font-size: 14px;
    		}
    		.c-create-time{
    			color: #999;
    			font-size: 14px;
    		}
    	}
    	p{
    		font-size: 14px;
		    line-height: 22px;
		    color: #222;
    	}
    	.c-footer-action{
    		margin-top: 6px;
    		.c-reply{
    			color: #406599;
    			cursor: pointer;
    		}
    		.reply-count{
    			font-size: 14px;
    		}
    		.c-report{
    			margin-left: 12px;
    			cursor: pointer;
    			&.icon{
    				color: #cacaca;
    			}
    			&:hover{
    				opacity: .6;
    			};
    		}
    		.c-digg{
    			.count{
    				color: #cacaca;
    				font-style: normal;
    			}
    			.icon{
    				color: #cacaca;
    				&:hover{
    					opacity: .6;
    				};
    			}
    			
    		}
    	}
    	.c-reply-comment {
    		margin-top: 26px;
		}
    }

}

</style>